<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
 <head> 
  <title>jQuery的可折叠的侧边栏菜单</title> 
  <base target="_blank" /> 
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
   <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
  <script type="text/javascript">
	$(document).ready(function () {
		$("dd:not(:first)").hide();    //这句话的意思就是除了第一个以外全部都隐藏
			$("dt a").click(function () {
				$("dd:visible").slideUp("slow");
				$(this).parent().next().slideDown("slow");
				return false;
		});
	});
</script> 


  <style>
body { font-family:'Verdana','宋体'; font-size: 16px; }
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style> 
 </head> 
 <body> 
  <dl> 
   <dt>
    <a href="http://keleyi.com/">jQuery</a>
   </dt> 
   <dd> 
    <ul> 
     <li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li> 
     <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li> 
     <li><a href="http://keleyi.com/menu/html5/">HTML5</a></li> 
     <li><a href="http://keleyi.com/menu/webqd/">web前端</a></li> 
    </ul> 
   </dd> 
   <dt>
    <a href="http://keleyi.com/game/5/">俄罗斯方块</a>
   </dt> 
   <dd> 
    <ul> 
     <li><a href="http://keleyi.com/dev/453467666cab56d0.htm" target="_blank">jquery图片轮播切换</a></li> 
     <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" target="_blank">友善的图片轮播</a></li> 
     <li><a href="http://keleyi.com/a/bjac/gucmqug3.htm" target="_blank">图片上下箭头滚动</a></li> 
     <li><a href="http://keleyi.com/a/bjac/a6e756c811719fff.htm" target="_blank">显示左右箭头的翻页代码</a></li> 
     <li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm" target="_blank">弹出灯箱窗口浏览图片</a></li> 
     <li><a href="http://keleyi.com/a/bjac/141932b419e08101.htm" target="_blank">ColorBox弹出图片组</a></li> 
     <li><a href="http://keleyi.com/a/bjac/06r1x7tg.htm" target="_blank">jquery相册实例</a></li> 
     <li><a href="http://keleyi.com/dev/453467666cab56d0.htm" target="_blank">jquery图片轮播切换</a></li> 
     <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" target="_blank">友善的图片轮播</a></li> 
     <li><a href="http://keleyi.com/a/bjac/gucmqug3.htm" target="_blank">图片上下箭头滚动</a></li> 
     <li><a href="http://keleyi.com/a/bjac/a6e756c811719fff.htm" target="_blank">显示左右箭头的翻页代码</a></li> 
     <li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm" target="_blank">弹出灯箱窗口浏览图片</a></li> 
    </ul> 
   </dd> 
   <dt>
    <a href="http://tool.keleyi.com/">工具</a>
   </dt> 
   <dd> 
    <ul> 
     <li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">当前时间</a></li> 
     <li><a href="http://keleyi.com/a/bjac/1juhjegr.htm">替换图片</a></li>
     <li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" title="jQuery友善的图片轮播(含首页和尾页)">图片轮播</a></li>
     <li><a href="http://keleyi.com/a/bjac/opnw2awa.htm">appendTo方法</a></li> 
     <li><a href="http://keleyi.com/a/bjac/eilhbrcm.htm">原文</a></li> 
    </ul> 
   </dd> 
  </dl> 
 </body>
</html>